<template>
    <div class="good-count">
        <span :class="(hasMinValue?model==minValue:model==1)?'disabled':''" @click.prevent.stop="addOrMinus('minus')">
            <i class="el-icon-minus"></i>
        </span>
        <input v-model="model" type="text" @blur="blur" @focus="focus" />
        <span @click.prevent.stop="addOrMinus('add')">
            <i class="el-icon-plus"></i>
        </span>
    </div>
</template>

<script>
export default {
    props: ['value', 'itemIndex', 'minValue'],
    computed: {
        model: {
            get () {
                return this.value
            },
            set (val) {
                this.$emit('input', val)
            },
        },
    },
    data () {
        return {
            selfModel: '',
            hasMinValue: '',
        }
    },
    created () {
        if (!isNaN(this.minValue)) {
            this.hasMinValue = true
        }
    },
    methods: {
        addOrMinus (type) {
            this.$emit('stepChange', {
                type,
                itemIndex: this.itemIndex,
            })
        },
        blur () {
            let selfModel = parseInt(this.model)
            if (isNaN(selfModel)) {
                this.model = 1
                selfModel = 1
            }
            this.$emit('blur', {
                model: selfModel,
                itemIndex: this.itemIndex,
            })
        },
        focus (e) {
            e.target.select()
        },
    },
}
</script>

<style lang="scss" scoped>
.good-count {
    vertical-align: middle;
    border: 1px solid #ddd;
    display: inline-block;
    width: 82px;
    margin: 0 auto;
    font-family: initial;
    input {
        width: 40px;
        height: 30px;
        padding: 0 5px !important;
        border-radius: 0;
        float: left;
        text-align: center;
        border: none;
        font-family: 'Microsoft YaHei';
        box-sizing: border-box;
        outline: none;
    }
    span {
        background-color: #f1f1f1;
        float: left;
        display: block;
        width: 20px;
        height: 30px;
        line-height: 25px;
        font-size: 18px;
        color: #666;
        font-weight: bold;
        text-align: center;
        cursor: pointer;
        user-select: none;
        &:hover {
            background-color: #d4d4d4;
        }
        i {
            font-size: 11px;
        }
    }
    span.disabled {
        color: #bbb;
        background-color: #f9f9f9!important;
    }
}
</style>

